/*
  学习目标：NavLink导航有类名
  1. 知道 Link 和 NavLink 组件的区别 - NavLink会添加上选中类名,active
  2. 知道如何自定义高亮类名 - activeClassName
  3. 💥知道：模糊匹配 和 精准匹配
      路径默认使用 模糊匹配 添加类名，想用精准匹配可以添加属性exact
    模糊匹配：路径url 包含 to/path 属性，那么就是模糊匹配
    例如：
    1. ✅路径为/home,       to="/home"
    2. ✅路径为/home/test,  to="/home"
    3. ❌路径为/home,       to="/home/test"

    精准匹配：路径url 全等 to/path 属性
*/
import React from 'react';
import './base.css';

// import { HashRouter as Router, Route, Link } from 'react-router-dom';
import {
  BrowserRouter as Router,
  Route,
  Link,
  NavLink,
} from 'react-router-dom';
export default class App extends React.Component {
  render() {
    return (
      <>
        {/* 使用 BrowserRouter 就是 history 的路由模式 */}
        <Router>
          {/* Link实现路由跳转，to代表前往的路径，类似vue中的routerLink */}
          <Link to="/home">首页</Link>
          <br />
          <Link to="/my">我的</Link>
          <br />
          <Link to="/friend">朋友</Link>
          <hr />
          <NavLink activeClassName="myActive" to="/home" exact>
            首页
          </NavLink>
          <br />
          <NavLink activeClassName="myActive" to="/my">
            我的
          </NavLink>
          <br />
          <NavLink activeClassName="myActive" to="/friend">
            朋友
          </NavLink>

          {/* Route创建单个路由,path路径，component组件 */}
          <Route path="/home" component={Home}></Route>
          <Route path="/my" component={MyMusic}></Route>
          <Route path="/friend" component={Friend}></Route>
        </Router>
      </>
    );
  }
}

function Home() {
  return <h1>我是首页组件</h1>;
}

function MyMusic() {
  return <h1>我是我的音乐组件</h1>;
}

function Friend() {
  return <h1>我是朋友组件</h1>;
}
